<template>
    <div class="search">
        <el-form ref="form1" :model="form" label-width="80px">
            <h4>基本 {{ form.time1 }}</h4>
            <div class="box">
                <el-card class="box-card">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="form.time1" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-card>
                <copy ref="copyText" :code="12"></copy>
            </div>

            <h4>格式转化 {{ form.time2 }}</h4>
            <div class="box">
                <el-card class="box-card">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="form.time2" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-card>
                <copy ref="copyText" :code="13"></copy>
            </div>

            <h4>时间范围 {{ form.time3 }}</h4>
            <div class="box">
                <el-card class="box-card">
                    <el-form-item label="时间范围">
                        <el-date-picker v-model="form.time3" type="daterange" range-separator="至"
                            start-placeholder="开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-card>
                <copy ref="copyText" :code="14"></copy>
            </div>

            <div class="box">
                <el-card class="box-card">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="form.strTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" @change="changTime">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="form.endTIme" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" @change="changTime">
                        </el-date-picker>
                    </el-form-item>
                </el-card>
                <copy ref="copyText" :code="15"></copy>
            </div>

            <h4>可选今天和今天之后的</h4>
            <div class="box">
                <el-card class="box-card">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="form.time2" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" :picker-options="pickerOptions0">
                        </el-date-picker>
                    </el-form-item>
                </el-card>
                <copy ref="copyText" :code="16"></copy>
            </div>

        </el-form>
    </div>
</template>
    
<script>
import copy from '../../components/copy.vue'
export default {
    components: { copy },
    data() {
        return {
            code: "",
            //
            form: {
                time: '',
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
        }
    },
    created() {

    },
    methods: {
        changTime() {
            //自动分配开始结束时间
            if (this.form.strTime && this.form.endTIme) {
                if (this.form.strTime > this.form.endTIme) {
                    let str = this.form.endTIme
                    this.form.endTIme = this.form.strTime
                    this.form.strTime = str
                }
            }
        }
    }
}
</script>
    
<style lang="less" scoped>
  @import './basic.less';
</style>
    
  